<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <crumbs @goBack="goBack" :superiorMenu="['首页', '我的申请']" currentMenu="申请发货详情"> </crumbs>
    <!-- <div class="uni-card" :style="{ width: mainDivWidth, paddingBottom: 0 }"> -->
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">申请编号</p>
            <p class="secondary-text">{{ workOrderInfo.applyNo || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">申请标题</p>
            <p class="secondary-text">{{ workOrderInfo.applyTitle || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">申请人</p>
            <p class="secondary-text">
              {{ workOrderInfo.createByText || '-' }},{{ workOrderInfo.createTime || '-' }}发起申请
            </p>
          </div>
        </div>
        <div class="detail-item" style="width: auto">
          <flow-status ids="ERP_SHIPPING_APPLY" :flowStatusText="workOrderInfo.flowStatusText" :flowStatus="workOrderInfo.flowStatus"></flow-status>
        </div>
        <!-- <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle">状态</p>
            <p class="secondary-text" :style="{ color: setColor(workOrderInfo.flowStatusText), fontSize: '16px' }">
              {{ workOrderInfo.flowStatusText }}
            </p>
          </div>
        </div> -->
        <!-- <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle">审核状态</p>
            <p class="secondary-text" style="color: #1890ff; font-size: 16px">{{ workOrderInfo.flowStatus || '-' }}</p>
          </div>
        </div> -->
      </div>
    </div>
    <div class="cards-box">
      <div>
        <a-card title="基本信息" :bordered="false" style="margin-top: 12px">
          <!-- <div class="item-wrap" style="width: 67%">
            <div class="detail-item">
              <p class="subtitle">客户名称</p>
              <p class="secondary-text">{{ workOrderInfo.customerIdText || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">销售合同</p>
              <p class="secondary-text">{{ workOrderInfo.contractIdText || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">承诺交期</p>
              <p class="secondary-text">{{ workOrderInfo.promiseDate || '-' }}</p>
            </div>
          </div> -->
          
          <div class="item-wrap">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">客户名称</p>
                <p class="secondary-text">{{ workOrderInfo.customerIdText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">销售合同</p>
                <p class="secondary-text">{{ workOrderInfo.contractIdText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">承诺交期</p>
                <p class="secondary-text">{{ workOrderInfo.promiseDate || '-' }}</p>
              </div>
            </div>
            <div class="detail-item" style="width: auto"></div>
          </div>

          <div class="item-wrap" style="margin-top: 20px">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">领用人</p>
                <p class="secondary-text">{{ workOrderInfo.receiveByText || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">发货日期</p>
                <p class="secondary-text">{{ workOrderInfo.shippingDate || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text"></p>
              </div>
            </div>
            <div class="detail-item" style="width: auto"></div>
          </div>
          <div class="item-wrap" style="margin-top: 20px">
            <div class="detail-item">
              <p class="subtitle">发货备注</p>
              <p class="secondary-text">{{ workOrderInfo.remark || '-' }}</p>
            </div>
            <div class="detail-item" />
            <div class="detail-item" />
          </div>
          <div class="item-wrap" style="margin-top: 40px">
            <div style="width: 100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="workOrderInfo.attachment"></file-detail>
            </div>
          </div>
        </a-card>
        <a-card title="发货明细" :bordered="false" style="margin-top: 12px">
          <a-table row-key="id" :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ x: '100%', y: 'calc(100vh - 366px)' }">
            <span slot="picUrl" slot-scope="text">
              <img :src="text" alt="" class="imgClass" />
            </span>
            <span slot="saleNum" slot-scope="text, record">
              {{ text || '-' }} <span v-if="text">{{ record.unit }}</span>
            </span>
            <span slot="saleBasicNum" slot-scope="text, record">
              {{ text || '-' }} <span v-if="text">{{ record.basicUnit }}</span>
            </span>
            <span slot="shippingNum" slot-scope="text, record">
              {{ text || '-' }} <span v-if="text">{{ record.unit }}</span>
            </span>
            <span slot="shippedNum" slot-scope="text, record">
              {{ text || '-' }} <span v-if="text">{{ record.unit }}</span>
            </span>
          </a-table>
        </a-card>
        <div style="padding: 12px">
          <Examine  v-if="workOrderInfo.flowInstId" type="2" :id="workOrderInfo.flowInstId" ref="examine" />
        </div>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { numFormat, subStrText, fourFloatNum } from '@/utils/util'
import { qualifiedInApplyQueryById } from '@/api/goodsManagement'
import { getFileListByIds } from '@/api/api'
import Examine from '@/components/examine'
import { APILX } from '@/api/requestLx'
import FlowStatus from '@/pubComponent/FlowStatus'
import { apiBaseUrlDownload } from '@/utils/request'
import FileDetail from '@/components/fileActions/FileDetail'
export default {
  name: 'applyDeliverDetail', //申请发货详情
  data() {
    return {
      jkeForm: {
        title: '申请发货详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      domianURL: apiBaseUrlDownload,
      fourFloatNum,
      subStrText,
      numFormat,
      tableData: [],
      columns: [
        {
          title: '商品图片',
          dataIndex: 'picUrl',
          width: 160,
          key: 'picUrl',
          ellipsis: true,
          scopedSlots: {
            customRender: 'picUrl',
          },
        },
        {
          title: '商品编号',
          dataIndex: 'goodsCode',
          key: 'goodsCode',
          width: 160,
          ellipsis: true,
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          width: 160,
          ellipsis: true,
        },
        {
          title: '规格',
          width: 160,
          dataIndex: 'spec',
          key: 'spec',
          ellipsis: true,
        },
        {
          title: '订购数量',
          dataIndex: 'saleNum',
          width: 160,
          key: 'saleNum',
          ellipsis: true,
          scopedSlots: {
            customRender: 'saleNum',
          },
        },
        {
          title: '订购基本数量',
          dataIndex: 'saleBasicNum',
          width: 160,
          key: 'saleBasicNum',
          ellipsis: true,
          scopedSlots: {
            customRender: 'saleBasicNum',
          },
        },
        {
          title: '已发货数量',
          dataIndex: 'shippingNum',
          width: 160,
          key: 'shippingNum',
          ellipsis: true,
          scopedSlots: {
            customRender: 'shippingNum',
          },
        },
        {
          title: '*本次发货数量',
          dataIndex: 'shippedNum',
          width: 160,
          key: 'shippedNum',
          ellipsis: true,
          scopedSlots: {
            customRender: 'shippedNum',
          },
        },
      ],
      //   mainDivWidth: 0,
      workOrderInfo: [],
      parentId: '',
    }
  },
  components: {
    crumbs,
    FlowStatus,
    FileDetail,
    Examine,
  },
  computed: {},
  mounted() {},
  methods: {
    setColor(s) {
      let cor = {
        1: '#888888',
        2: '#1890FF',
        3: '#00B042',
        审批中: '#1890FF', //蓝色
        审批通过: '#00B042', //绿色
        已拒绝: '#ff4d4f', //红色
      }
      return cor[s] || ''
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.requestData()
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = current
      this.requestData()
    },
    initDetail(query) {
      this.jkeForm.visible = true
      this.parentId = query.applyNo
      APILX.shippingDetail(this.parentId).then((res) => {
        if (res.success) {
          if (res.result) {
            this.workOrderInfo = res.result
            let tableData = res.result.erpShippingApplyItemInfoVoList
            tableData.forEach((item) => {
              if (item.attachment) {
                let ids = item.attachment
                getFileListByIds({ ids }).then((res) => {
                  if (res.code == 200) {
                    let fileList = ''
                    fileList = res.result
                    if (fileList.length > 0) {
                      item.picUrl = this.domianURL + fileList[0].uri
                      this.tableData.push(item)
                    } else {
                      item.picUrl = require('../../assets/img/noPicture.jpg')
                      this.tableData.push(item)
                    }
                  }
                })
              } else {
                item.picUrl = require('../../assets/img/noPicture.jpg')
                this.tableData.push(item)
              }
            })
            console.log(tableData, '0.0tableData')
            // this.tableData = tableData
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 160px);
  overflow-y: scroll;
}
.tabBox {
  margin-top: 20px;
}
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}
div.explaneBox {
  .flex(flex-end, center);
  margin-bottom: 40px;
  div.one {
    .flex(center, center);

    div.color {
      width: 14px;
      height: 14px;
      background: #dfdfdf;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.two {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #1890ff;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }

  div.three {
    .flex(center, center);
    margin-left: 40px;
    div.color {
      width: 14px;
      height: 14px;
      background: #00b042;
      border-radius: 2px;
      margin-right: 6px;
    }

    div.text {
      font-size: 14px;
      color: #888888;
    }
  }
}
div.progressBox {
  .flex(flex-start, center);
  flex-wrap: wrap;
  div.itemPro {
    .flex(flex-start, center);
    margin-bottom: 16px;
    &:nth-last-child(1) .itemRight {
      display: none;
    }
    div.itemLeft {
      div.leftTop {
        width: 180px;
        text-align: center;
        font-size: 16px;
        color: #444444;
        margin-bottom: 14px;
      }

      div.leftBot {
        width: 180px;
        height: 116px;
        background: rgba(244, 245, 246, 1);
        border-radius: 6px;
        .flex(space-between, center,column);
        box-sizing: border-box;
        padding: 13px 0;
        div.botOen {
          font-size: 14px;
          color: #888888;
        }

        div.botTwo {
          font-size: 14px;
          color: #888888;
        }

        div.botThree {
          font-size: 14px;
          color: #888888;
        }

        .havePadding {
          .flex(center, center);
          width: 134px;
          font-size: 12px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      height: 2px;
      width: 64px;
      background: #f4f5f6;
      position: relative;
      top: 16px;
    }
  }
}
/deep/ .ant-progress-inner {
  background-color: #dfdfdf;
}
.title {
  span {
    font-size: 14px;
    color: #888888;
  }
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}
</style>
